<script setup lang="ts">
import { imagePath } from '@/libs/file-utils'
import { showGuideQuizMask, go } from './data'

const guide_logo = imagePath('community/friend/info/guide-logo.png')
const guide_go = imagePath('community/friend/info/guide-go.png')
</script>

<template>
  <MaskWrapper v-model:show="showGuideQuizMask">
    <div
      class="guide-quiz"
      @click.stop=""
    >
      <div
        class="logo"
        :style="{ backgroundImage: guide_logo }"
      ></div>

      <div class="title">报告运蒜中</div>
      <div class="tip">建议前往蒜盘游戏区体验~</div>

      <div
        class="go"
        :style="{ backgroundImage: guide_go }"
        @click="go"
      ></div>
    </div>
  </MaskWrapper>
</template>

<style lang="less" scoped>
.guide-quiz {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;

  padding: 96rpx 0 50rpx;

  background-color: #fff;
  border-radius: 32rpx 32rpx 0rpx 0rpx;

  .logo {
    position: absolute;
    top: -284rpx;
    left: 50%;
    transform: translateX(-50%);

    width: 508rpx;
    height: 426rpx;
  }

  .title {
    font-size: 40rpx;
    text-align: center;
  }

  .tip {
    margin-top: 10rpx;

    color: rgba(#000, .65);
    font-size: 32rpx;
    text-align: center;
  }

  .go {
    width: 331rpx;
    height: 125rpx;

    margin: 48rpx auto 0;
  }
}
</style>